
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Zhou Wenying
  Date: 2023/3/15
  Time: 23:09
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>提交订单-购物车</title>
	<meta http-equiv="Expires" content="0">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="pragma" content="no-cache">
	<link rel="shortcut icon" href="/static/favicon.ico">
	<link rel="stylesheet" href="/static/css/reset.css">
	<link rel="stylesheet" href="/static/css/base.css">
	<link rel="stylesheet" href="/static/css/Cart.css">

	<style>
		/* 隐藏模态框的外边距和边框 */
		.zfmodal {
			display: none; /* 隐藏模态框 */
			position: fixed; /* 固定定位 */
			z-index: 1; /* 创建新的堆叠上下文 */
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto; /* 允许垂直滚动 */
			background-color: rgba(0,0,0,0.4); /* 黑色半透明背景 */
		}

		/* 在模态框内容和遮罩之间添加间距 */
		.zfmodal-content {
			background-color: #fefefe;
			margin: 8% auto;
			padding: 20px;
			border: 1px solid #888;
			width: 50%;
			text-align: center;
		}

		/* 如果关闭按钮位于模态框的右上角，请设置位置和样式 */
		.zfclose {
			position: absolute;
			right: 15px;
			top: 0;
			color: #aaa;
			font-size: 28px;
			font-weight: bold;
		}

		/* 点击关闭按钮时更改其颜色 */
		.zfclose:hover,
		.zfclose:focus {
			color: black;
			text-decoration: none;
			cursor: pointer;
		}
	</style>
</head>
<body>
<jsp:include page="/page/head2.jsp"></jsp:include>
<div class="Consigneew boxS w1190">
	<div class="Consignee clearfix">
		<h3 class="Contitle">
			个人信息
		</h3>
		<div>
			<span>用户名：${sessionScope.user.userNickname}</span><span> 余额：${sessionScope.user.userMoney}</span>
		</div>
	</div>
</div>
<!-- 收货人信息 -->
<div class="Consigneew boxS w1190">
	<div class="Consignee clearfix">
		<h3 class="Contitle">
			收货人信息
		</h3>
		<div>
			<ul id="allAddress" class="address clearfix">
				<li class="checkbox1 checked">
					<p class="user">龙章辉</p>
					<p class="site">湖南长沙市芙蓉区朝阳街街道车站北路凯旋大厦26楼，京途教育</p>
					<p class="phonenum">18932479990</p>
				</li>
				<li class="checkbox1">
					<p class="user">龙章辉</p>
					<p class="site">湖南长沙市芙蓉区朝阳街街道车站北路凯旋大厦26楼，京途教育</p>
					<p class="phonenum">18932479990</p>
				</li>
			</ul>
		</div>
		<button>
			+添加收货地址
		</button>
	</div>
</div>

<c:set var="allMoney" scope="request" value="${0.0}"/>
<c:set var="allCount" scope="request" value="${0}"/>
<c:if test="${empty change}">
<!-- 订单部分 -->
<div class="indent boxS">
	<div class="indentAea w1190">
		<h3 class="Contitle">结算商品</h3>
		<!-- 全选标题部分 -->
		<div class="IAhead">
			<span class="Information">商品信息</span>
			<span style="margin-left: 130px;">作者</span>
			<ul class="IAul">

				<li>原价（元）</li>
				<li>现价（元）</li>
			</ul>
		</div>
		<div class="IAbd">
			<ul class="IAbdArea">
			<c:forEach items="${books}" var="book">
				<li class="IAbdw bookId" bookid="${book.bookId}">
					<img src="/getImg?img=${book.bookImg}" alt="">
					<p>
						<a class="pro" href="/showBook?bookId=${book.bookId}" style="font-size:20px">${book.bookName}</a>
					</p>
					<p class="IAtax"><u>${book.bookAuthor}</u></p>
					<ul class="IAul">

						<li class="price">
							<%--保存所有钱与个数--%>
							<c:set var="allMoney" scope="request" value="${allMoney + book.bookMoney}"/>
							<c:set var="allCount" scope="request" value="${allCount + 1}"/>
							<s>${book.bookOldMoney}</s>
						</li>
						<li class="Lastprice">¥ <u>${book.bookMoney}</u></li>
					</ul>
				</li>
			</c:forEach>
			</ul>
			<div class="IAbdfoot">
				<a id="submitOrder">去结算</a>
				<%--<button id="mybt">去结算</button>--%>
				<p>
					<strong>已选商品<b id="allnum"> ${allCount} </b>件</strong>
					<strong>总价（含运费）：<b>￥<u id="allpri">${String.format("%.2f",allMoney)}</u></b></strong><br>
				</p>
			</div>
		</div>
	</div>
</div>
</c:if>
	<!-- 底部 -->
<jsp:include page="footer.jsp"></jsp:include>

<!-- 地址模态窗口 -->
<div class="mode">
	<div class="modeArea">
		<h4>新增地址</h4>
		<p class="Rpeople">
			<strong>
				<em>*</em>
				<span>收货人</span>
			</strong>
			<input id="newName" class="w170" type="text" placeholder="限20个字">
		</p>
		<p class="Detailed">
			<strong>
				<em>*</em>
				<span>详细地址</span>
			</strong>
			<input id="newAddress" class="w370" type="text" placeholder="省-县(区) 详细地址">
		</p>
		<p class="phonenum">
			<strong>
				<em>*</em>
				<span>电话号码</span>
			</strong>
			<input id="newPhone" class="w170" type="text" placeholder="请输入正确的手机号">
		</p>
		<p class="Tel">
			<strong>
				<em>*</em>
				<span>邮箱</span>
			</strong>
			<input id="newMail" class="w170" type="text" name="email" placeholder="邮箱" lay-verify="email"  required>
		</p>
		<p class="default">
			<strong></strong>
			<span id="newDefault" class="checkbox"></span>
			<span >设为默认地址</span>
		</p>
		<p class="sure">
			<strong></strong>
			<button id="newBtOk">确定</button>
			<a href="#">取消</a>
		</p>
		<p class="close">+</p>
	</div>
</div>


<%--支付模态框--%>
<div class="zfmodal" id="myModal">
	<div class="zfmodal-content">
		<span class="zfclose">&times;</span>
		<h2>扫码支付</h2>
		<img  src="static/image/me.jpg" width="400px" height="400px">
	</div>
</div>

</body>
</html>
<script src="/static/js/jquery-1.7.2.min.js"></script>
<script src="/static/js/jquery.lazyload.min.js"></script>
<script src="/static/js/base.js"></script>
<script>
	// 提交订单
	$("#submitOrder").click(function () {
		console.log("提交订单");
		var allBook = "";
		var addrId = "";
		//modal.style.display = "block"; //打开模态框
		$(".bookId").each(function () {
			var bookId = $(this).attr("bookid");
			allBook += bookId + "&";
		})

		// $(".checkbox1 .checked").each(function () {
		// 	addrId = $(this).attr('addressid');
		// 	console.log(addrId)
		// 	console.log($(this)[0])
		//
		// });
		var addressid= $(".checkbox1.checked");
		addrId = addressid.attr('addressid');

		if (addrId == "" || addrId == undefined || addrId == null){
			layer.msg("你没有选择地址");
			return;
		}
		var money = ${allMoney};
		var myMoney = ${sessionScope.user.userMoney};
		if (myMoney<money){
			layer.msg("余额不足，请充值！");
			return;
		}

		var obj = {};
		obj.addrid = addrId;
		obj.bookid = allBook;
		var json = JSON.stringify(obj);
		console.log(json)
		$.ajax({
			url:"/insertOrder",
			type:"post",
			dataType:"json",
			data:json,
			contentType: false,
			success:function (json) {
				console.log(json);
				//var obj = JSON.parse(data);
				if (json.ret == 'true'){
					window.location.href = "/myOrderBuy";
				}else {
					layer.msg(json.data);
				}
			},
			error:function (data) {
			}
		});
	});

	/*更新默认地址*/
	$(document).on('click','.checkbox1',function () {
		$(".checkbox1").each(function () {
			$(this).removeClass('checked');
		});
		$(this).addClass('checked');
		var addrId = $(this).attr("addressid");
		console.log("addrId:"+addrId);


		$.ajax({
			url:"/updataDefaultAddr?addrId="+addrId,
			type:"post",
			//dataType:"json",
			contentType: false,
		});
	});

	$.ajax({
		url:"/getAddress",
		type:"post",
		dataType:"json",
		//data:json,
		contentType: false,
		success:function (json) {
			console.log(json);
			//var obj = JSON.parse(data);
			if (json.ret == 'true'){
				setAllAddress(json.data);
			}else {
				layer.msg(json.data);
			}
		},
		error:function (data) {

		}
	});

	function setAllAddress(addressList) {
		console.log(addressList);
		var allAddress = $("#allAddress");
		//清空以前的地址
		allAddress.html("");
		var html = "";
		for (var i = 0 ;i< addressList.length ;i++){
			var address = addressList[i];
			console.log(address);
			//{"addrId":1,"userId":9,"addrName":"期望","addrAddr":"期望","addrPhone":"123","addrMail":"123","addrCheck":0}
			var isCheck = "";
			if (address.addrCheck == 1){
				isCheck = " checked";
			}
			var inhtml = "<li addressid=\""+address.addrId+"\" class=\"checkbox1"+isCheck+"\">" +
					"<p class=\"user\">名字:"+address.addrName+"</p>" +
					"<p class=\"site\">地址:"+address.addrAddr+"</p>" +
					"<p class=\"phonenum\">电话:"+address.addrPhone+"</p>" +
					//"<p class=\"phonenum\">邮箱:"+address.addrMail+"</p>" +
					"</li>";
			html+=inhtml;
		}
		allAddress.html(html);
	}
/*确认添加地址*/
	$("#newBtOk").click(function () {
		var newName = $("#newName").val();
		var newAddress = $("#newAddress").val();
		var newPhone = $("#newPhone").val();
		var newMail = $("#newMail").val();
		var newDefault = 0;
		if ($("#newDefault").hasClass('checked')){
			newDefault = 1;
		}

		var obj = {};
		obj.newName = newName;
		obj.newAddress = newAddress;
		obj.newPhone = newPhone;
		obj.newMail = newMail;
		obj.newDefault = newDefault;
		var json = JSON.stringify(obj);
		$.ajax({
			url:"/addAddress",
			type:"post",
			dataType:"json",
			data:json,
			contentType: false,
			success:function (json) {
				console.log(json);
				//var obj = JSON.parse(data);
				if (json.ret == 'true'){
					setAllAddress(json.data);
					$('.mode').fadeOut(400);
				}else {
					layer.msg(json.data);
				}
			},
			error:function (data) {

			}
		});


	})

	/*/!*支付*!/
	// 获取支付模态框、按钮和关闭按钮
	var modal = document.getElementById("myModal");
	/!*var btn = document.getElementById("mybt");*!/
	var closeBtn = document.getElementsByClassName("zfclose")[0];

	/!*!// 点击按钮打开模态框
	btn.onclick = function() {
		modal.style.display = "block";
	}*!/
	// 点击关闭按钮或模态框外部区域时关闭模态框
	closeBtn.onclick = function() {
		modal.style.display = "none";
	}

	window.onclick = function(event) {
		if (event.target == modal) {
			modal.style.display = "none";
		}
	}
*/
</script>
</body>
</html>